<template>
    <div id="search">
<div class="spacebetween">
  <h3 @click="route('home')" class="bspan">关闭</h3>
  <el-input type="text" placeholder="请输入内容" v-model="search"  @keyup.enter.native="enter" >
    <el-button slot="append" icon="el-icon-search" @click.native="enter"></el-button>
  </el-input>
</div>
            <ul class="link">
                <li v-for="item in items" :key="item.id">
                    <a @click='route(item.route)'>
                        <h1 :style="{color: item.color}">{{item.type}}</h1>
                        <span>{{item.sub}}</span>
                    </a>
                </li>
            </ul>
        <search-history :tag-list="tagHistoryList" @do-search="doSearch"></search-history>

      <BaseFind :finds="findMusic" @toClass="toClass"></BaseFind>
      <BaseFind :finds="findMovie" @toClass="toClass"></BaseFind>
    </div>
</template>

<script>
import BaseFind from "./BaseFind";
import {mapState} from 'vuex'
import SearchHistory from "./searchHistory";
export default {
  name: "MainSearch",//搜索页面
  components: {SearchHistory, BaseFind},
  data() {
        return {
            search: '',
            items: [
                {id: 0, type: '电影', sub: '影院热映', route: 'movie', color: 'rgb(35, 132, 232)'},
                {id: 1, type: '音乐', sub: '最受欢迎', route: 'music', color: 'rgb(122, 106, 219)'}
            ],
         tagHistoryList:this.$store.state.home.tagHistoryList,
          findMovie:  {
            title: '发现好电影',
            items: [
              {searchWord: '感动', color: '#FFC46C',content:'戳人泪点的电影'},
              {searchWord: '指环王', color: '#42BD56',content: '魔幻世界'},
              {searchWord: '我要我们', color: '#4F9DED',content:'用电【影】来祭奠逝去的岁月'},
              {searchWord:'你的婚礼',content: '女孩们的故事【电影】', color: '#CC3344'},
              {searchWord:'悬崖',content: '猜你爱看系列', color: '#42BD56'},
            ]
          }
        }
    },
  beforeCreate() {
    this.$store.dispatch('music/musicHotSearch')
  },
  computed:{...mapState({
findMusic:state=>state.music.findMusic
    })},
  methods: {
        route(r) {
            this.$router.push({
                name: r
            });
        },
      doSearch(item){
          this.search=item
        this.enter()
      },
      addHistory(item){
          this.$store.dispatch('home/SaveTagHistory',item)
      },
        enter() {
            if(this.search.trim()) {
                this.$router.push({path:'/result',
                    query: {
                        search: this.search.trim()
                    }
                });
              this.addHistory(this.search.trim())
            }
            this.search = '';
        },
      toClass(tag){
        this.$router.push({path:'/result',
          query: {
            search: tag
          }
        });
        this.addHistory(tag)
      }
    }
}
</script>

<style scoped>
#search {
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;}
.link{
  text-align: center;
}
    .link li {
        display: inline-block;
        width: 40%;
        height: 70px;
      margin-top: 50px;
      font-size:12px;color: #999;letter-spacing: 1px;
     }
    .bspan{
      margin-left: 20px;
      margin-top: 20px;
      width: 60px;
      display: flex;
      align-items: center;
    }
</style>
